<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>

  </style>
</head>
<body>
    <div id="app">
        <button @click="change">
          {{type=='UserLoign'?'手机号验证码登录':'用户名密码登录'}}  
        </button>
        <hr>
        <!-- 
            component 组件
                1.它是vue提供的内置组件
                2.我们把他称之为  动态组件【可以变换的组件】
                3.component 一般和 is  搭配使用
                
         -->
        <user-login></user-login>
    </div>

    <template id="user-login">
        <div>
            <div class="row">
                <label for="">用户名：</label>
                <input type="text"placeholder="请输入用户名">
            </div>
            <div class="row">
                <label for="">密码：</label>
                <input type="text"placeholder="请输入密码">
            </div>
        </div>
    </template>

    <template id="phone-login">
        <div>
            <div class="row">
                <label for="">手机号</label>
                <input type="text"placeholder="请输入手机号">
            </div>
            <div class="row">
                
                <input type="text"><button>验证码:</button>
            </div>

        </div>
       </template>
   
</body>
<script>
  /*
        is属性  ：
            将某一个组件绑定给某一个元素，这个元素会安装组建的模板来渲染
        * is属性常见案例：组件切换
            * 用户名密码登录 和 手机号验证码登录的切换
            * 分析：
            *   用户名密码登录  是一个组件
            *   手机号验证码登录 也是一个组件
            *    按钮-方法
  */  
Vue.component('UserLogin',{
    template:'#user-login'
})
Vue.component('PhoneLogin',{
    template:'#phone-login'
})
 new Vue({
   el:"#app",
   data:{
    type:'UserLogin'
   }
    
   })
</script>
</html>